<template>
  <div>
    <!-- 头部 -->
    <Header />
    <!-- <div class="registerHead">
      <div class="container">
        <div class="headInline">
          <a class="leftImg" href="/index">
            <div class="headLeft">
              <img src="@/assets/img/logo.png" alt="">
              <div class="headTitle">
                <h1>数据资产运营平台</h1>
                <h4>Data Asset Operation Platform</h4>
              </div>
            </div>
          </a>
          <div class="rightText">
            <span>找回密码</span>
          </div>
        </div>
      </div>
    </div> -->
    <div class="container">
      <div class="oneStep">
        <el-steps :active="active" finish-status="success" simple>
          <el-step title="选择找回密码方式"></el-step>
          <el-step title="账户验证"></el-step>
          <el-step title="设置新密码"></el-step>
        </el-steps>
      </div>
      <!-- 找回密码方式 -->
      <div class="oneBetween" v-if="isActive === 'type'">
        <ul>
          <li class="oneFound" @click="hanldeClick('email')" :class="selectVal === 'email' ? 'selectFound' : 'oneFound'">
            <img src="@/assets/images/mail.png" alt="">
            <p>通过邮箱验证找回密码</p>
          </li>
          <!-- <li @click="hanldeClick('phone')" :class="selectVal === 'phone' ? 'selectFound' : ''" style="margin-right:0;">
            <img src="@/assets/images/phone.png" alt="">
            <p>通过手机验证找回密码</p>
          </li> -->
        </ul>
        <div class="foundBtn">
          <el-button type="primary" @click="handleFound()">下一步</el-button>
        </div>
      </div>
      <!-- 邮箱验证 找回密码-->
      <div class="emailCode" v-if="isActive === 'emailFound'">
        <el-form :model="emailForm" :rules="emailRule" ref="emailForm" class="demo-ruleForm" label-width="100px">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="emailForm.userName" placeholder="请输入登录账号"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="emailForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="emailCode">
            <el-col :span="15">
              <el-input v-model="emailForm.emailCode" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button :disabled="disabled" @click="logInCode" class="codeBtn" type="primary" plain>{{
                btnTxt
              }}</el-button>
            </el-col>
          </el-form-item>
          <el-form-item class="optionBtn">
            <el-button class="prevBtn" @click="prevBtn()">上一步</el-button>
            <el-button class="nextBtn" type="primary" @click="submitForm()">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 手机号验证 找回密码-->
      <div class="emailCode" v-if="isActive === 'phoneFound'">
        <el-form :model="phoneForm" :rules="phoneRule" ref="phoneForm" class="demo-ruleForm" label-width="100px">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="phoneForm.userName" placeholder="请输入登录账号"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="phoneForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="phoneCode">
            <el-col :span="15">
              <el-input v-model="phoneForm.phoneCode" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button :disabled="disabled2" @click="logInCode2" class="codeBtn" type="primary" plain>{{
                btnTxt2
              }}</el-button>
            </el-col>
          </el-form-item>
          <!-- <el-form-item label="密码" prop="password">
            <el-input type="password" show-password v-model="phoneForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" show-password v-model="phoneForm.checkPass" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item class="optionBtn">
            <el-button class="prevBtn" @click="prevBtn()">上一步</el-button>
            <el-button class="nextBtn" type="primary" @click="submitFormPhone()">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 设置新密码 -->
      <div class="updatePwd " v-if="isActive === 'setPwd'">
        <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-form">
          <el-form-item label="新密码" prop="password">
            <el-popover placement="right" trigger="focus" width="240">
              <p v-show="passwordIndex == -1">
                请至少输入6个字符。请不要使用容易被猜到的密码。
              </p>

              <div v-show="passwordIndex == 0">
                <p style="font-size: 16px; color: #e47470">强度：太短</p>
                <el-progress :percentage="50" status="exception"></el-progress>
                <p style="padding-top: 5px">
                  请至少输入6个字符。请不要使用容易被猜到的密码。
                </p>
              </div>

              <div v-show="passwordIndex == 1">
                <p style="font-size: 16px; color: #e47470">强度：弱</p>
                <el-progress :percentage="50" status="exception"></el-progress>
                <p style="padding-top: 5px">
                  请至少输入6个字符。请不要使用容易被猜到的密码。
                </p>
              </div>

              <div v-show="passwordIndex >= 2">
                <p style="font-size: 16px; color: #7ebf50">强度：安全</p>
                <el-progress :percentage="100" status="success"></el-progress>
                <p style="padding-top: 5px">
                  请至少输入6个字符。请不要使用容易被猜到的密码。
                </p>
              </div>
              <el-input slot="reference" type="password" v-model="form.password" maxlength="16" show-password></el-input>
            </el-popover>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkPass">
            <el-input type="password" v-model="form.checkPass" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="sureBtn" type="primary" @click="handleUpdate()">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <SimpleFooter />
  </div>
</template>

<script>
import {
  forgetEmailLogin,
  changeLoginPwd,
  sendChangePhone,
  sendPhoneReset,
} from "@/request/api/login";
import SimpleFooter from "@/components/home/simpleFooter/simpleFooter";
import rulesUtil from "@/utils/rules";
import Header from "@/components/home/header/header";

export default {
  components: {
    SimpleFooter,
    Header
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.phoneForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      active: 0,
      emailForm: {
        userName: "", //登录账号
        email: "", //邮箱
        emailCode: "", //验证码
      },
      emailRule: {
        userName: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        email: [{ required: true, validator: rulesUtil.FormValidate.Form().validateEmail, trigger: "blur" }],
        emailCode: [
          { required: true, message: "请输入邮箱验证码", trigger: "blur" },
        ],
      },
      phoneRule: {
        userName: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        phone: [
          {
            required: true,
            validator: rulesUtil.FormValidate.Form().validatePhone,
            trigger: "blur",
          },
        ],
        phoneCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        password: [{ required: true, validator: rulesUtil.FormValidate.Form().validatePsdReg, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass3, trigger: "blur" },
        ],
      },
      phoneForm: {
        userName: "", //登录账号 必填
        password: "", //新密码 必填，前台不需要加密
        phone: "", //绑定的手机号 必填
        phoneCode: "", //短信验证码 必填 8888仅供测试
        checkPass: "", //确认密码
      },
      btnTxt: "获取验证码",
      disabled: false,
      time: 60,
      isActive: "type", //当前步骤
      selectVal: "", //选择找回密码方式
      form: {
        password: "",
        checkPass: "",
      },
      rules: {
        password: [
          { required: true, validator: rulesUtil.FormValidate.Form().validatePsdReg, trigger: "blur" },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      passwordIndex: -1,
      btnTxt2: "获取验证码",
      disabled2: false,
      time2: 60,
    };
  },
  created() { },
  methods: {
    // 选择方式后点击下一步
    handleFound() {
      if (!this.selectVal) {
        this.$message({
          message: "请选择找回密码方式！",
          type: "warning",
        });
        return false;
      }
      this.active = 1;
      if (this.selectVal === "email") {
        this.isActive = "emailFound";
      } else if (this.selectVal === "phone") {
        this.isActive = "phoneFound";
      }
    },
    // 上一步
    prevBtn() {
      this.active = 0;
      this.isActive = "type";
    },
    // 点击获取验证码-邮箱
    logInCode() {
      if (this.emailForm.email === "") {
        this.$message({
          message: "请输入邮箱！",
          type: "warning",
        });
        return false;
      }
      if (this.emailForm.userName === "") {
        this.$message({
          message: "请输入登录账号！",
          type: "warning",
        });
        return false;
      }
      this.getSendEmail(this.emailForm.email, this.emailForm.userName);
    },
    // 发送手机验证码-邮箱
    getSendEmail(email, userName) {
      let params = {
        email,
        userName,
      };
      forgetEmailLogin(params).then((res) => {
        if (res.data.code === 200) {
          this.$notify({
            title: "成功",
            message: res.data.message,
            type: "success",
          });
          this.time = 60;
          this.timer();
        } else {
          this.$notify({
            title: "错误",
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
    //发送邮箱验证码倒计时-邮箱
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.btnTxt = this.time + "秒";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btnTxt = "获取验证码";
        this.disabled = false;
      }
    },
    // 第二步，邮箱账户验证
    submitForm() {
      this.$refs.emailForm.validate((valid) => {
        if (valid) {
          this.active = 2;
          this.isActive = "setPwd";
        }
      });
    },
    //第三步 设置新密码
    handleUpdate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.selectVal == 'email') {
            let params = {
              password: this.form.password, //新密码 必填
              userName: this.emailForm.userName, //登录账号 必填
              email: this.emailForm.email, //绑定的邮箱 必填
              emailCode: this.emailForm.emailCode, //邮箱验证码 必填 8888仅供测试
            };
            changeLoginPwd(params).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: "密码修改成功，请使用新密码进行登录！",
                  type: "success",
                });
                this.$router.push("/login");
              } else {
                this.$message.error(res.data.message);
              }
            });
          } else if (this.selectVal == 'phone') {
            let params = {
              password: this.form.password, //新密码 必填
              userName: this.phoneForm.userName, //登录账号 必填
              phone: this.phoneForm.phone, //绑定的邮箱 必填
              phoneCode: this.phoneForm.phoneCode, //邮箱验证码 必填 8888仅供测试
            };
            sendChangePhone(params).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.message,
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.push("/login");
                }, 1200);
              } else {
                this.$message.error(res.data.message);
              }
            });
          }

        }
      });
    },
    // 选择找回密码方式
    hanldeClick(val) {
      this.selectVal = val;
    },
    checkPassWord(value) {
      // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
      // 3： 表示第四个级别 4：表示第五个级别
      var modes = 0;
      if (value.length < 6) {
        //最初级别
        return modes;
      }
      if (/\d/.test(value)) {
        //如果用户输入的密码 包含了数字
        modes++;
      }
      if (/[a-zA-Z]/.test(value)) {
        //如果用户输入的密码 包含了小写的a到z
        modes++;
      }
      // if (/[A-Z]/.test(value)) {
      //   //如果用户输入的密码 包含了大写的A到Z
      //   modes++;
      // }
      if (/\W/.test(value)) {
        //如果是非数字 字母 下划线
        modes++;
      }
      switch (modes) {
        case 1:
          return 1;
          break;
        case 2:
          return 2;
          break;
        case 3:
          return 3;
          break;
      }
    },
    // 选择手机号换密码
    submitFormPhone() {
      this.$refs.phoneForm.validate((valid) => {
        if (valid) {
          this.active = 2;
          this.isActive = "setPwd";
          // let params = {
          //   password: this.form.password, //新密码 必填
          //   userName: this.phoneForm.userName, //登录账号 必填
          //   phone: this.phoneForm.email, //绑定的邮箱 必填
          //   phoneCode: this.phoneForm.emailCode, //邮箱验证码 必填 8888仅供测试
          // };
          // console.log(params)
          // sendChangePhone(params).then((res) => {
          //   if (res.data.code === 200) {
          //     this.$message({
          //       message: res.data.message,
          //       type: "success",
          //     });
          //     setTimeout(() => {
          //       this.$router.push("/login");
          //     }, 1200);
          //   } else {
          //     this.$message.error(res.data.message);
          //   }
          // });
        }
      });
    },
    // 点击获取验证码-手机号
    logInCode2() {
      if (this.phoneForm.phone === "") {
        this.$message({
          message: "请输入手机号！ ",
          type: "warning",
        });
        return false;
      }
      this.getSendPhone(this.phoneForm.phone);
    },
    //发送手机验证码倒计时-手机号
    timer2() {
      if (this.time2 > 0) {
        this.disabled2 = true;
        this.time2--;
        this.btnTxt2 = this.time2 + "秒";
        setTimeout(this.timer2, 1000);
      } else {
        this.time2 = 0;
        this.btnTxt2 = "获取验证码";
        this.disabled2 = false;
      }
    },
    // 发送手机验证码-手机号
    getSendPhone(phone) {
      let params = {
        phone,
      };
      sendPhoneReset(params).then((res) => {
        if (res.data.code === 200) {
          this.$notify({
            title: "成功",
            message: res.data.message,
            type: "success",
          });
          this.time2 = 60;
          this.timer2();
        } else {
          this.$notify({
            title: "错误",
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
  },
  watch: {
    "form.password": {
      handler: function (val, oldVal) {
        if (val.length == "") {
          this.passwordIndex = -1;
        } else {
          this.passwordIndex = this.checkPassWord(val);
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
@import "../login/login.less";
@import "../register/register.less";
@import "./common.less";
</style>
